<template>
  <!-- 津贴确认 -->
  <div class="page-padding-bg">

    <div>
      <manager-table :titleOption="titleOption" :tableTopBtn="tableTopBtn" :columns="columns" :dataSource="dataSource" :tableRBtn="tableRBtn" @tableRClick="tableRClick" @tableTopClick="tableTopClick"
        v-model="search1" v-model:search2="search2" @search_btn="search_btn" @resert="resert"></manager-table>

      <Pagination :currentPage="currentPage" :limit="limit" :total="total" @page_change="page_change"></Pagination>

      <!-- 弹层 -->
      <lay-layer v-model="is_visible" :area="['700px', '630px']" :title="visibleTitle" :btn="visible_opteron">
        <div style="padding: 20px 40px 20px 20px;">
          <lay-form :model="form" ref="layFormRef11" required>
            <lay-form-item label="牌号名称" prop="smokeName">
              <lay-input v-model="form.smokeName" size="sm"></lay-input>
            </lay-form-item>
            <lay-form-item label="香气" prop="smokeAroma">
              <lay-input v-model="form.smokeAroma" size="sm"></lay-input>
            </lay-form-item>

            <lay-form-item label="余味" prop="smokeAftertaste">
              <lay-input v-model="form.smokeAftertaste" size="sm"></lay-input>
            </lay-form-item>

            <lay-form-item label="光泽" prop="smokeGloss">
              <lay-input v-model="form.smokeGloss" size="sm"></lay-input>
            </lay-form-item>

            <lay-form-item label="协调" prop="smokeHarmony">
              <lay-input v-model="form.smokeHarmony" size="sm"></lay-input>
            </lay-form-item>

            <lay-form-item label="杂气" prop="smokeImpure">
              <lay-input v-model="form.smokeImpure" size="sm"></lay-input>
            </lay-form-item>

            <lay-form-item label="刺激性" prop="smokeThrill">
              <lay-input v-model="form.smokeThrill" size="sm"></lay-input>
            </lay-form-item>

            <lay-form-item label="总计" prop="smokeTotal">
              <lay-input v-model="form.smokeTotal" size="sm"></lay-input>
            </lay-form-item>

          </lay-form>
        </div>
      </lay-layer>

    </div>

  </div>
</template>
  
  <script setup lang="ts">
import { layer } from "@layui/layui-vue";
import ManagerTable from "@/components/ManagerTable.vue";
import http from "@/http/index";
import { onMounted, ref } from "vue";
import Pagination from "@/components/pagination.vue";

interface FormType {
  smokeName: string | number;
  smokeAroma: string | number;
  smokeAftertaste: string | number;
  smokeGloss: string | number;
  smokeHarmony: string | number;
  smokeImpure: string | number;
  smokeThrill: string | number;
  smokeTotal: string | number;
}
// 上方查询配置
const titleOption = ref({
  // name1: "时间",
  name2: "选择日期", 
  btn1: "查询",
  btn2: "重置",
  // name1Type:"time",
  name2Type:"time",
  name2disables:"noThisMonth",
  name1Show:0 //不显示

});
// 表格上方配置
const tableTopBtn = ref([
  // {
  //   name: "新增",
  //   type: "normal",
  //   clickType: "add",
  //   id: "1",
  // },
  //   {
  //     name: "修改",
  //     type: "primary",
  //     clickType: "edit",
  //     id: "2",
  //   },
  //   {
  //     name: "删除",
  //     type: "danger",
  //     clickType: "del",
  //     id: "3",
  //   },
]);
// table 右侧配置
const tableRBtn = ref([
  // {
  //   name: "修改",
  //   type: "primary",
  //   clickType: "edit",
  //   id: "1",
  // },
  // {
  //   name: "删除",
  //   type: "danger",
  //   clickType: "del",
  //   id: "2",
  // },
]);

// 弹层控制
const is_visible = ref(false);
// 弹层表单
const form = ref<FormType>({
  smokeName: "",
  smokeAroma: "",
  smokeAftertaste: "",
  smokeGloss: "",
  smokeHarmony: "",
  smokeImpure: "",
  smokeThrill: "",
  smokeTotal: "",
});

// 牌号  津贴
const search1 = ref("");
const search2 = ref("");

const layFormRef11 = ref();
// 弹层title
const visibleTitle = ref("");
// 弹层按钮
const visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      layFormRef11.value.validate(async (isValidate, model, errors) => {
        console.log(isValidate);
        if (isValidate) {
          let data = {};
          let tip = "";
          let methods = "";
          if (visibleTitle.value == "添加") {
            data = form.value;
            tip = "添加";
            methods = "post";
          } else if (visibleTitle.value == "修改") {
            data = { ...form.value, id: tableID.value };
            tip = "修改";
            methods = "put";
          }

          const res = await http.corsApi("/smokeStandard", methods, data);
          console.log(res);
          if (res.data) {
            await get_list(pageNo.value, pageSize.value);
            layer.confirm(tip + "成功", { icon: 1 });
            is_visible.value = false;
          }
        }
      });
    },
  },
  {
    text: "取消",
    callback: () => {
      is_visible.value = false;
      //   layer.confirm("取消操作", { shade: false,icon:2 });
    },
  },
]);

// 表格配置
const columns = ref([
  // {
  //   title: "创建时间",
  //   key: "createday",
  // },
  {
    title: "部门",
    key: "orgName",
  },
  {
    title: "姓名",
    key: "userName",
  },
  // {
  //   title: "身份证",
  //   key: "identityCard",
  // },
  {
    title: "单料烟支数（月）",
    key: "unblendedAmount",
  },
  {
    title: "成品烟支数（月）",
    key: "perfectAmout",
  },
  {
    title: "总金额（元）",
    key: "totalAmount",
  },

  {
    title: "操作",
    customSlot: "allowanceoperator",
    key: "allowanceoperator",
  },
]);
const dataSource = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);
// 当前点击的id
const tableID = ref("");
// 表格操作按钮
const tableRClick = async (item, row) => { 
  console.log(item, row);

  if (item.type == "view") {
    console.log("view");
  } else if (item.type == "enter" && row.status == "0") {
    console.log("enter");

    const res = await http.corsApi(`/allowance/editStatus?id=${row.id}`, "put", { id: row.id });
    console.log(res);
    if (res.code == 200) {
      layer.msg("确认成功", { icon: 1, time: 1500 });

      await get_list(pageNo.value, pageSize.value);

    }
  }
};
// 表格上方按钮
const tableTopClick = (item) => {
  console.log(search1.value, search2.value);

  console.log(item);
  if (item.clickType === "add") {
    visibleTitle.value = "添加";
    is_visible.value = true;
    Object.keys(form.value).forEach((key) => (form.value[key] = ""));
  }
};

// 查询
// 查询
const search_btn = async () => {
    console.log(search2.value);
    
  await get_list(pageNo.value, pageSize.value);
};
// 重置
const resert = async () => {
  search1.value = "";
  search2.value = "";
  await get_list(pageNo.value, pageSize.value);
};

// 分页
const limit = ref(10);
const total = ref(0);
const currentPage = ref(1);
// 分页事件
const page_change = async (page, limt) => {
  console.log(page, limt);
  currentPage.value = page;
  await get_list(page, limt);
};

const get_list = async (page: number | string, pagesize: number | string) => {
  const res = await http.corsApi("/allowance/page", "get", {
    pageNo: page,
    pageSize: pagesize,
    // userId: search1.value,
    // identityCard: search2.value,
    // createday:search1.value,
    // beginTime: search2.value[0] || '',
    date:search2.value
    // endTime:  search2.value[1] || '',
  }); 

  console.log(res);
  dataSource.value = res.data.list;
  total.value = res.data.totalCount;
};

// 页面初始化、
onMounted(() => {
  get_list(pageNo.value, pageSize.value);
});
</script>
  
  <style scoped>
</style>